<html>

<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <meta charset="utf-8">
    <title>指南针 - Hello全视界</title>
    <script src="./../lib/vue.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            font-size: 16px;
        }

        div.compassApp {
            height: 100%;
            background-color: #1c1c1c;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        div.compassBody {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 15rem;
            height: 15rem;
            border-radius: 50% 50%;
            border: 4px solid #62d128;
            flex-shrink: 0;
        }

        .compassPointer {
            height: 80%;
            /* transform: rotate(0deg); */
        }

        .compassPointer>path {
            fill: #62d128;
        }

        .compassMsg>p {
            color: #62d128;
            text-align: center;
            line-height: 1rem;
        }

        .compassMsg>p:first-child {
            font-size: 2rem;
        }

        .compassMsg>p:last-child {
            font-size: 1.5rem;
        }

        .fullScreenBtn {
            position: absolute;
            right: 20px;
            bottom: 10px;
            border: #62d128 solid 2px;
            background: #1c1c1c;
            color: #62d128;
            padding: 10px 20px
        }
    </style>
</head>

<body>
    <div class="compassApp" id="compassApp">
        <div class="compassBody">
            <svg :style="rotationStyle" class="compassPointer" id="compassPointer" xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 118 593">
                <!-- vue没报错，但还是不对 -->
                <path d="M61-.14S2,218.76,2,296.36s59,296.5,59,296.5S120,374,120,296.36,61-.14,61-.14ZM15.16,311.35h91.61C106.77,370.21,61,544.86,61,544.86S15.16,370.21,15.16,311.35Z"
                    transform="translate(-1.96 0.14)" />
            </svg>
        </div>
        <div class="compassMsg">
            <p>{{compassRad}}°</p>
            <p>...</p>
        </div>
        <button v-if="!fullScreenStatus" v-on:click="fullScreen" class="fullScreenBtn">全屏</button>
        <button v-else v-on:click="fullScreen" class="fullScreenBtn">退出全屏</button>
    </div>
    <script>

        var compassApp = new Vue({
            el: '#compassApp',
            data: {
                compassRad: null,
                rotationStyle: {
                    transform: "rotate(" + this.compassRad + "deg)",
                },
                fullScreenStatus: false
            },
            methods: {
                fullScreen: function () {
                    if (!this.fullScreenStatus) {
                        document.body.webkitRequestFullscreen();
                        this.fullScreenStatus = true
                    } else {
                        document.webkitExitFullscreen();
                        this.fullScreenStatus = false
                    }
                }
            }
        });

        window.addEventListener("deviceorientation", orientationHandler, true);
        function orientationHandler(orientData) {
            compassApp.compassRad = Math.floor(orientData.alpha);
            document.getElementById('compassPointer').style.transform = "rotate(" + compassApp.compassRad + "deg)"

        }
    </script>
</body>

</html>